<template>
  <div class="app-container" v-loading="pageLoading">
    <el-tabs v-model="currentTab" @tab-click="tabClick" :before-leave="beforeLeave">
      <!-- TAB1 -->
      <el-tab-pane label="基本信息" name="tab1">
        <tab1 ref="tab1" :laberDesignId.sync="laberDesignId" :currentTab.sync="currentTab" :isCommon.sync="isCommon" />
      </el-tab-pane>
      <!-- TAB2 -->
      <el-tab-pane label="模板上传/设计" name="tab2">
        <tab2 ref="tab2" :laberDesignId.sync="laberDesignId" :currentTab.sync="currentTab" :isCommon.sync="isCommon" />
      </el-tab-pane>
      <!-- TAB3  -->
      <el-tab-pane label="模板绑定" name="tab3" v-if="!isCommon">
        <tab3 ref="tab3" :laberDesignId.sync="laberDesignId" :currentTab.sync="currentTab" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import tab1 from '@/views/masterdata/components/laberDesignInfo/tab1'
import tab2 from '@/views/masterdata/components/laberDesignInfo/tab2'
import tab3 from '@/views/masterdata/components/laberDesignInfo/tab3'

import dayjs from 'dayjs'

export default {
  mixins: [commonMixin],
  name: 'labelDesignInfo',
  components: {
    tab1,
    tab2,
    tab3,
  },
  data: function () {
    return {
      pageLoading: false,
      currentTab: 'tab1',
      laberDesignId: null,
      isCommon: 0,
      data: {},
      formProps: {
        dialogWidth: '100%',
        labelWidth: '100px',
        disabled: false,
      },
    }
  },
  methods: {
    tabInit(tab) {
      //页签数据已经初始化了

      switch (tab) {
        case 'tab1':
          // this.$refs.tab1.getTabInit()
          break
        case 'tab2':
          // this.$refs.tab2.getTabInit()
          break
        case 'tab3':
          // this.$refs.tab3.getTabInit()
          break
      }
    },
    tabClick(v) {
      this.tabInit(v.name)
    },
    beforeLeave(v) {
      if (!this.laberDesignId) {
        this.$message.error('请先创建基本信息')
        return false
      }
    },
  },
  watch: {},
  created: function () {
    if (this.$route.query && this.$route.query.id) {
      this.laberDesignId = this.$route.query.id
    }
  },
}
</script>

<style scoped>
</style>
